<template>
	<view class="contaner">
		<uni-popup ref="pop_free" type="bottom">
			<view class="selectService text-left">
				<view class="text-center fimg_box">
					<image class="f_img" src="../../../static/goux.png" mode="aspectFill"></image>
				</view>
				<view class="text-bold text-center f_text">邀请您开通免密支付服务</view>
				<view class="text-center text-c6 margin-top">小额支付时无需验证支付密码</view>
				<view class="f_xydis text-xs padding-left-xl padding-bottom">
					<view class="padding-lr text-c6">
						查看
						<text class="fxytext padding-lr-xs">《小额免密服务协议》</text>
					</view>
				</view>
				<view class="padding-lr-lg">
					<view class="full_btn">同意协议并立即开启</view>
				</view>
				<view class="f_backBtn text-center">暂不开通</view>
			</view>
			</uni-popup>
			<view class="headSec bg-green padding-lr p_rlt cf">
				<view class="cardDetail padding-lr">
					<view class="text-bold text-center text-c3 catit">小颐有约免密支付服务</view>
					<view class="flex text-c6 cadis">
						<view class="padding-right-xs">开通账号</view>
						<view class="flex-sub">135****356</view>
					</view>
					<view class="flex margin-top-lg text-c6">
						<view class="padding-right-xs">服务介绍</view>
						<view class="flex-sub">小颐有约小程序付款渠道，开通免密支付， 无需输入密码即可完成</view>
					</view>
				</view>
			</view>
			<view class="pad_cfull"></view>
			<view class="centerSec padding-lr">
				<view class="type_box margin-top-sm text-c6">
					<view class="tybItem padding-left flex align-center">
						<view class="flex-sub">扣费方式</view>
						<view class="padding-right">
							电子卡
							<text class="margin-left-xs cuIcon-right"></text>
						</view>
					</view>
				</view>
				<view class="tycfw">
					<view class="text-c9">请选择开通范围</view>
				</view>
				<checkbox-group class="flex flex-wrap margin-top" @change="changeCk">
					<label v-for="(item, index) in list" :key="index" class="ckbitem">
						<checkbox class="round" :class="{ checked: item.checked }" :value="item.id" :checked="item.checked" />
						{{ item.name }}
					</label>
				</checkbox-group>
			</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	// import { onShow } from '@dcloudio/uni-app';
	const list = ref([
		{
			name: '会员卡',
			id: '1',
			checked: false
		},
		{
			name: '健康卡',
			id: '2',
			checked: false
		},
		{
			name: '尊享卡',
			id: '3',
			checked: false
		},
		{
			name: '套餐卡',
			id: '4',
			checked: false
		},
		{
			name: '新店卡',
			id: '5',
			checked: false
		}
	])
	const changeCk = (e : any) => {
		console.log(e);
	}
</script>

<style lang="scss">
	.headSec {
		height: 200rpx;
	}

	.cardDetail {
		position: absolute;
		width: calc(100vw - 60rpx);
		left: 30rpx;
		bottom: -450rpx;
		height: 600rpx;
		background: #ffffff;
		box-shadow: 0px 4rpx 18rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;

		.catit {
			padding-top: 160rpx;
			font-size: 40rpx;
		}

		.cadis {
			padding-top: 80rpx;
		}
	}

	.pad_cfull {
		width: 100%;
		height: 450rpx;
	}

	.type_box {
		background: #ffffff;
		box-shadow: 0px 2px 18rpx rgba(0, 0, 0, 0.08);
		border-radius: 16px;
	}

	.tybItem {
		width: 100%;
		height: 120rpx;
	}

	.tycfw {
		margin-top: 40rpx;
	}

	.ckbitem {
		width: 33%;
		display: inline-block;
		height: 72rpx;
		line-height: 73rpx;

		.round {
			margin-right: 10rpx;
			transform: scale(0.7);
		}
	}

	// pop_free
	.selectService {
		min-height: 600rpx;
		padding-top: 38rpx;
	}

	.f_backBtn {
		line-height: 100rpx;
	}

	.f_img {
		width: 120rpx;
		height: 120rpx;
	}

	.fimg_box {
		height: 120rpx;
	}

	.f_text {
		font-size: 40rpx;
		padding-top: 70rpx;
	}

	.f_xydis {
		padding-top: 120rpx;
	}

	.fxytext {
		color: rgba(86, 191, 122, 0.5);
	}
</style>